<template>
	<view class="login">
		<my-back></my-back>
		<u-gap height="120"></u-gap>
		<view class="title">你好，</view>
		<view class="title">欢迎来到企大咖</view>

		<u-gap height="120"></u-gap>
		<view class="form">
			<u-field v-model="form.mobile" label="+86" placeholder="请输入手机号">
			</u-field>

			<u-field v-model="form.password" password label="密码" placeholder="请输入密码" v-if="form.type=='pwd'">
			</u-field>

			<u-field v-model="form.code" :label-width="0" placeholder="验证码" v-if="form.type=='sms'">
				<u-tag slot="right" mode="plain" :text="tips" type="success" @click="getCode"></u-tag>
			</u-field>
			<u-verification-code :seconds="60" ref="uCode" @change="codeChange" v-if="form.type=='sms'"></u-verification-code>
		</view>
		<u-gap height="16"></u-gap>
		<view class="flex-row justify-between" style="padding: 20rpx 28rpx;width: 600rpx;margin: 0 auto;">
			<text class="text-primary" @click="form.type=(form.type=='pwd'?'sms':'pwd')">{{form.type=='pwd'?'短信登录':'密码登录'}}</text>
			<text class="text-gray" @click="$goto('/pages/login/forget')">忘记密码？</text>
		</view>
		<u-gap height="120"></u-gap>

		<view class="btn" @click="login">
			登录
		</view>
		<view class="btn sub" @click="$goto('/pages/login/register')">
			注册
		</view>

		<u-gap height="40"></u-gap>
		<view class="more">
			其他登录方式
		</view>
		<view class="flex-row justify-center padding-top">
			<image src="../../static/images/login-wx.png" style="width: 72rpx;height: 72rpx;" @click="wxlogin"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '获取验证码',
				form: {
					mobile: '',
					password: '',
					code: '',
					type: 'pwd'
				}
			};
		},
		methods: {
			login() {
				this.$u.post('/passport/login', this.form).then(res => {
					this.$msg(res.data.msg)
					if (res.data.code == 0) {
						let {
							finance,
							userinfo,
							token
						} = res.data.result
						this.$store.commit('setFinance', finance)
						this.$store.commit('setToken', token);
						this.$store.commit('userLogin', userinfo);
						this.$goto('/pages/mine/index', 'tab');
					}
				})
			},
			wxlogin() {
				uni.login({
					provider: 'weixin',
					success: res => {
						let {
							authResult,
							errMsg
						} = res
						if (errMsg == 'login:ok') {
							this.$u.post('/third/wxLogin', authResult).then(res => {
								this.$msg(res.data.msg)
								if (res.data.code == 0) {
									let {
										finance,
										userinfo,
										token
									} = res.data.result
									this.$store.commit('setFinance', finance)
									this.$store.commit('setToken', token);
									this.$store.commit('userLogin', userinfo);
									this.$goto('/pages/mine/index', 'tab');
								} else if (res.data.code == 4001) {
									this.$goto('/pages/login/register-wx?unionid=' + authResult.unionid)
								}
							})
						}
					},
					fail: err => {
						console.log(err)
					}
				});
			},
			codeChange(e) {
				this.tips = e
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$u.post('/code/mobile?type=login', {
						mobile: this.form.mobile
					}).then(res => {
						uni.hideLoading();
						if (res.data.code == 0) {
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							this.$u.toast(res.data.msg)
						}
					})
				} else {
					this.$u.toast('稍后再试');
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.more {
		margin: 0 auto;
		width: 200rpx;
		height: 32rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 32rpx;
		text-align: center;

		&::before {
			content: '';
			width: 50rpx;
			height: 2rpx;
			background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, rgba(216, 216, 216, 1) 100%);
		}
	}
</style>
